import Vue from 'vue'

const compOne = {
  // 组件被外部调用 一些可变、可配置的行为
  // props 单向数据流
  // 关于props 传function的方式 流行用事件代替
  props: {
    // 数据类型
    // active: Boolean,
    active: {
      // type: Boolean,
      // required: true,  // 一般为 2选一
      // default: false,
      validator (value) {
        return typeof value === 'boolean'
      }
    },
    propOne: String,
    onChange: Function
    // obj: {
    //   type: Object,
    //   default () {
    //     return {

    //     }
    //   }
    // }
  },
  // props: ['active', propOne]
  mounted () {
    // 官方不建议改值 会有警告
    // this.propOne = 'test1'
  },
  template: `
    <div>
      <input v-model="text" />
      <span @click="handlChange">{{propOne}}</span>
      <span @click="handlChange2">{{propOne}}</span>
      <span v-show="active">当active为true时显示</span>
    </div>
  `,
  data () {
    return {
      text: 123
    }
  },
  methods: {
    handlChange () {
      console.log('handlChange')
      this.onChange()
    },
    handlChange2 () {
      console.log('handlChange2')
      this.$emit('change')
    }
  }
}

// 定义为全局组件
// Vue.component('CompOne', compoent)

new Vue({
  components: {
    CompOne: compOne
  },
  el: '#app',
  data: {
    prop1: 'text1'
  },
  // props 写成 prop-one 也可写成 propOne 官方不建议这样
  template: `
    <div>
      <comp-one ref="comp1" :active="true" :prop-one="prop1" :onChange="handlChange" @change="handlChange"></comp-one>
      <comp-one ref="comp2" :active="false" :prop-one="prop1" :onChange="handlChange"></comp-one>
    </div>
  `,
  methods: {
    handlChange () {
      this.prop1 += 1
    }
  },
  mounted () {
    console.log(this.$refs.comp1)
  }
})
